<template>
  <view
    :style="{ 'padding-top': cover_state ? bar_Height + 44 + 'px' : '0px' }"
  >
    <view class="status-bar">
      <view
        class="goBack"
        bindtap="goBack"
        :style="{ 'padding-top': bar_Height + 'px' }"
        v-if="show_bol"
      >
        <!-- /*返回按钮*/ -->
        <image :src="imageUrlone + '/nav/return-primary.svg'"></image>
      </view>
      <view
        class="tabar"
        :class="my_class ? 'tabar2' : ''"
        :style="{ 'padding-top': bar_Height + 'px' }"
      >
        <text class="tabar-title">{{ title }}</text>
        <!-- /*标题*/ -->
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      // 设置标题
      type: String,
      value: "",
    },
    cover_state: {
      // 控制页面padding-top
      type: Boolean,
      value: false,
    },
    show_bol: {
      // 控制返回箭头是否显示
      type: Boolean,
      value: false,
    },
    my_class: {
      // 控制样式
      type: Boolean,
      value: false,
    },
    returnUrl: {
      // 返回的路由，默认返回上一页
      type: String,
      default: "",
    },
  },
  data() {
    return {
      imageUrlone: this.imageUrl,
      bar_Height: wx.getSystemInfoSync().statusBarHeight,
    };
  },
  methods: {
    goBack() {
      // 返回事件
      let that = this;
      if (that.returnUrl) {
        uni.redirectTo({
          url: that.returnUrl,
          fail(e) {
            // if(e.errMsg == 'redirectTo:fail:can not redirect to a tabbar page' || e.errMsg == 'redirectTo:fail can not redirectTo a tabbar page'){
            //   uni.reLaunch({
            //     url:that.returnUrl
            //   })
            // }
            uni.reLaunch({
              url: that.returnUrl,
            });
          },
        });
      } else {
        uni.navigateBack();
      }
    },
  },
};
</script>

<style>
.status-bar {
  width: 100%;
  z-index: 99999;
  position: fixed;
  top: 0;
}
.goBack {
  position: absolute;
  top: 15rpx;
  font-size: 24rpx;
}
.goBack image {
  width: 21rpx;
  height: 40rpx;
  padding: 12rpx 20px 0 30rpx;
}
.tabar {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.tabar2 {
  background: transparent !important;
}
.tabar2 text {
  color: #fff !important;
  font-weight: lighter !important;
}
.tabar text {
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 30rpx;
  color: #353535;
  font-size: 24rpx;
  font-weight: bold;
}
.tabar .active {
  color: #fff;
}
.tabar-title {
  text-align: center;
  flex: 1;
   font-size: 30rpx;
}
</style>